<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>表单管理</title>
    <link rel="stylesheet" th:href="@{/pear/component/pear/css/pear.css}"/>
</head>
<body class="pear-container">
<div class="layui-row">
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">
                <h3>流程图列表</h3>
            </div>
            <div class="layui-card-body" style="height: 800px">
                <table id="form-table" lay-filter="form-table"></table>
            </div>
        </div>
    </div>
    <div class="layui-col-md8">
        <div class="layui-card">
            <div class="layui-card-header">
                <h3>流程预览</h3>
            </div>
            <div class="layui-card-body" style="min-height: 100vh">
                <iframe
                        th:src="@{/pear/component/bpmnModeler/index.html}"
                        id="bpmnFrame"
                        frameborder="0"
                        width="100%"
                        height="800px">
                </iframe>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="form-bar">
    <button class="layui-btn layui-bg-blue layui-btn-sm" lay-event="select"><i
            class="layui-icon layui-icon-share">选择</i>
    </button>
</script>


<script th:src="@{/pear/component/layui/layui.js}"></script>
<script th:src="@{/pear/component/pear/pear.js}"></script>

<script th:inline="javascript">
    let baseURL = /*[[@{/}]]*/ '';
    layui.use(['table', 'layer', 'jquery'], function () {
        let layer = layui.layer;
        let table = layui.table;
        let $ = layui.jquery;


        let cols = [
            [
                {field: 'name', title: '流程名称',},
                {title: '操作', templet: '#form-bar', align: 'center'}
            ]
        ]
        table.render({
            elem: '#form-table',
            url: baseURL + 'workflow/flowDefinition/list',
            type: 'get',
            where: {
                formType: 2,
            },
            page: true,
            limit: 10,
            limits: [10, 20, 30],
            request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            },
            cols: cols,
            parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data.total,
                    "data": res.data.list,
                };
            },
            response: {
                statusCode: 1000
            }
        });

        document.getElementById('bpmnFrame').onload = function () {
            // 初始化数据
            const initData = {
                xml: "", // 初始XML内容
                users: [],
                groups: [],
                categorys: [],
                isView: true
            };

            // 向iframe发送初始化数据
            this.contentWindow.postMessage(initData, '*');
        };

        table.on('row(form-table)', function (obj) {
            let data = obj.data; // 获取当前行数据
            const decodedArrayBuffer = atob(data.bpmnXml);
            const decodedUint8Array = new Uint8Array(decodedArrayBuffer.length);
            for (let i = 0; i < decodedArrayBuffer.length; i++) {
                decodedUint8Array[i] = decodedArrayBuffer.charCodeAt(i);
            }

            // 使用 TextDecoder 解码为指定编码的字符串
            const decoder = new TextDecoder('utf-8'); // 指定编码格式为 GBK
            const decodedString = decoder.decode(decodedUint8Array);

            // 初始化数据
            const initData = {
                xml: decodedString, // 初始XML内容
                users: [],
                groups: [],
                categorys: [],
                isView: true
            };

            // 向iframe发送初始化数据
            document.getElementById('bpmnFrame').contentWindow.postMessage(initData, '*');

        });

        table.on('tool(form-table)', function (obj) {
            if (obj.event === 'select') {
                window.select(obj);
            }
        });


        //选择流程
        window.select = function (obj) {
            window.name = obj.data.name;
            let data = obj.data; // 获取当前行数据
            const decodedArrayBuffer = atob(data.bpmnXml);
            const decodedUint8Array = new Uint8Array(decodedArrayBuffer.length);
            for (let i = 0; i < decodedArrayBuffer.length; i++) {
                decodedUint8Array[i] = decodedArrayBuffer.charCodeAt(i);
            }

            // 使用 TextDecoder 解码为指定编码的字符串
            const decoder = new TextDecoder('utf-8'); // 指定编码格式为 GBK
            window.bpmnXml = decoder.decode(decodedUint8Array);
            // 打开弹窗
            layer.open({
                type: 2,
                title: '请选择部署部门',
                area: ['380px', '260px'],
                content: 'process_definition_department',
                btn: [],   // 由子页面自行处理按钮
            });
        };
    })
</script>
</body>
</html>
